
<template>
  <div>
    <el-radio-group v-model="approverConfig.assignedType" @change="assignedTypeChangeEvent" class="ml-4">
      <el-row>
        <template v-for="({ value, label }) in setTypes" :key="value">
          <el-col style="margin-top: 5px;" :span="8"
            v-if="!excludeAssignType || (excludeAssignType?.length > 0 && (excludeAssignType.indexOf(value) < 0))">

            <el-radio :label="value">{{ label }}
            </el-radio>
          </el-col>
        </template>

      </el-row>
    </el-radio-group>

    <template v-if="approverConfig.assignedType === 1">
      <h4>选择成员</h4>
      <select-show :disable-select-children-dept="false" v-model:orgList="approverConfig.nodeUserList" type="org"
        :multiple="true"></select-show>
    </template>
   
    <template v-if="approverConfig.assignedType === 8">
      <h4>人员控件</h4>
      <el-select v-model="formUserIdComputed" clearable class="m-2" placeholder="请选择审批表单" size="large">
        <el-option v-for="item in step2FormUserList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </template>
   
    <template v-if="approverConfig.assignedType === 9">
      <h4>部门控件</h4>
      <el-select v-model="formDeptIdComputed" clearable style="width: 30%;" placeholder="请选择部门表单">
        <el-option v-for="item in step2FormDeptList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </template>
   
    <template v-if="approverConfig.assignedType === 15">
      <h4>选择部门</h4>
      <select-show :disable-select-children-dept="false" v-model:orgList="approverConfig.nodeUserList" type="dept"
        :multiple="true"></select-show>
    </template>

    <!--	//表单中的部门 指定部门  指定成员（包含部门）-->
    <template v-if="approverConfig.assignedType === 9">
      <h4>是否包含下级部门</h4>
      <el-switch v-model="approverConfig.containChildrenDept" size="large" active-text="当前部门以及下级部门"
        inactive-text="仅限当前部门" />
    </template>

    <template v-if="approverConfig.assignedType === 15 || approverConfig.assignedType === 9">
      <h4>选择部门属性</h4>
      <el-radio-group v-model="approverConfig.deptUserType" class="ml-4">
        <el-radio label="allUser" size="large">部门人员</el-radio>
        <el-radio label="leader" size="large">部门主管</el-radio>
        <el-radio label="role" size="large">部门下的角色</el-radio>
      </el-radio-group>
    </template>

    <template
      v-if="(approverConfig.assignedType === 15 && approverConfig.deptUserType === 'role') || (approverConfig.assignedType === 9 && approverConfig.deptUserType === 'role')">
      <h4>选择角色</h4>
      <select-show v-model:orgList="approverConfig.roleList" type="role" :multiple="true"></select-show>
    </template>

    <template v-if="approverConfig.assignedType === 3">
      <h4>选择角色</h4>
      <select-show v-model:orgList="approverConfig.nodeUserList" type="role" :multiple="true"></select-show>
    </template>

    <template v-if="approverConfig.assignedType === 7">
      <h4>审批终点</h4>
      <span style="font-size: 14px;margin-right: 5px;">到第</span>
      <el-input-number v-model="approverConfig.deptLeaderLevel" :step="1" :min="1" :max="20" step-strictly
        size="small" />
      <span style="font-size: 14px;margin-left: 5px;">级部门主管终止</span>
    </template>

    <template v-if="approverConfig.assignedType === 2">
      <h4>指定审批层级</h4>
      <span style="font-size: 14px;margin-right: 5px;">第</span>
      <el-input-number v-model="approverConfig.deptLeaderLevel" :step="1" :min="1" :max="20" step-strictly
        size="small" />
      <span style="font-size: 14px;margin-left: 5px;">级部门主管</span>
    </template>
    
  </div>
</template>

<script setup lang="ts">
// TODO: 表单模版节点-设置组件-组织机构
import { setTypes } from "../../../utils/const";
import { computed } from "vue";
import { useFlowStore } from '../../../stores/flow'
import selectShow from "../../orgselect/selectAndShow.vue";

let props = defineProps({

  approverConfig: {
    type: Object,
    dafault: () => {
    }
  },
  excludeAssignType: {
    type: Array,
    dafault: () => []
  }
});

let flowStore = useFlowStore();
const step2FormList = computed(() => {
  let step2 = flowStore.step2;
  return step2;
})

const step2FormUserList = computed(() => {
  return step2FormList.value.filter(res => res.type === 'SelectUser' || res.type === 'SelectMultiUser');
})

//审批人类型变化
const assignedTypeChangeEvent = (e) => {
  props.approverConfig.nodeUserList = [];
  props.approverConfig.formUserId = ''
  props.approverConfig.formUserName = ''
}

var formUserIdComputed = computed({
  get() {
    return props.approverConfig.formUserId;
  },
  set(val) {
    props.approverConfig.formUserName = step2FormUserList.value.filter(res => res.id === val)[0].name
    props.approverConfig.formUserId = val
  }
})

const step2FormDeptList = computed(() => {
  return step2FormList.value.filter(res => res.type === 'SelectDept' || res.type === 'SelectMultiDept');
})

var formDeptIdComputed = computed({
  get() {
    return props.approverConfig.formUserId;
  },
  set(val) {
    props.approverConfig.formUserId = val
    props.approverConfig.formUserName = step2FormDeptList.value.filter(res => res.id === val)[0].name
  }
})
</script>

<style scoped lang="less"></style>
